<template>
    <div>
      <span>门店Logo :</span>
      <el-upload
        action="#"
        list-type="picture-card"
        :auto-upload="false"
        :limit="1"
      >
        <el-icon><Plus /> </el-icon>
        <span style="font-size: 10px; margin-top: 20px">点击上传图片</span>
  
        <template #file="{ file }">
          <div>
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <el-icon><zoom-in /></el-icon>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
              >
                <el-icon><Download /></el-icon>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <el-icon><Delete /></el-icon>
              </span>
            </span>
          </div>
        </template>
      </el-upload>
  
      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import{ref} from "vue"
  const dialogImageUrl = ref("");
  const dialogVisible = ref(false);
  const disabled = ref(false);
  
  // 这下面的是 图片上传验证
  const handleRemove = (file) => {
    console.log(file);
  };
  const handlePictureCardPreview = (file) => {
    dialogImageUrl.value = file.url;
    dialogVisible.value = true;
    console.log(file);
  };
  const handleDownload = (file) => {
    console.log(file);
  };
  </script>
  
  <style  scoped></style>